<template>
	<view class="u-page">
		<view class="u-demo-block" style="padding: 30rpx;">
			<view class="u-demo-block__content">
				<u--form labelPosition="left" ref="form1" :model="formData" :label-width="100">
					<u-form-item label="品牌" prop="userInfo.name" borderBottom>
						<u--input v-model="formData.brand" border="none" placeholder="请输入车辆品牌"></u--input>
					</u-form-item>
					
					<u-form-item label="颜色" prop="userInfo.name" borderBottom>
						<u--input v-model="formData.color" border="none" placeholder="请输入车辆颜色"></u--input>
					</u-form-item>
					
					<u-form-item label="车架号" prop="userInfo.name" borderBottom>
						<u--input v-model="formData.vin" border="none" placeholder="请输入车架号"></u--input>
					</u-form-item>
					
					<u-form-item label="类型" prop="vehicleType" borderBottom>
						<u-radio-group v-model="formData.vehicleType">
							<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					
					<u-form-item label="车牌号" prop="userInfo.name" borderBottom>
						<!-- <u--input v-model="formData.plateNumber" border="none" placeholder="请输入车牌号"></u--input> -->
						<text class="text" style="font-size: 28rpx;color: #000;" v-if="formData.plateNumber" @click="openCar">{{ formData.plateNumber || '请输入车牌号' }}</text>
						<text class="text" style="font-size: 28rpx;color: #C0C4CB;" v-else @click="openCar">请输入车牌号</text>
					</u-form-item>
					
					<u-form-item label="是否默认" borderBottom>
						<u-switch size="20" v-model="formData.defaultSelected"></u-switch>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
			</view>
		</view>
		
		<keyboard-plate ref="plateNumber" :safeArea="true" @change="getPlateNum" isShow></keyboard-plate>
	</view>
</template>

<script>
	import { isEmpty } from '@/utils/index.js';
	export default {
		data() {
			return {
				rules: {
				},
				radiolist1: [{
						name: '新能源',
						disabled: false
					},
					{
						name: '混动车',
						disabled: false
					}
				],
				formData: {
					color: '',
					brand: '',
					vehicleType: '新能源',
					plateNumber: '',
					vin: '',
					defaultSelected: 0
				},
				id: 0
			}
		},
		onLoad({ id }) {
			this.id = id;
			uni.setNavigationBarTitle({
				title: id ? '编辑车辆' : '新增车辆'
			});
			this.getInfo();
		},
		methods: {
			openCar() {
				this.$refs.plateNumber.open();
			},
			
			getPlateNum(e) {
				this.formData.plateNumber = e.value;
			},
			
			getInfo() {
				if (!this.id) return;
				let { brand, color, defaultSelected, plateNumber, vehicleType, vin } = uni.getStorageSync('vehicleEditInfo');
				plateNumber = plateNumber.join('').replace('•', '')
				this.formData = { brand, color, defaultSelected, plateNumber, vehicleType, vin };
				this.formData.defaultSelected = this.formData.defaultSelected == 1
			},
			
			radioChange(n) {
				console.log('radioChange', n);
			},
			submit() {
				const data = JSON.parse(JSON.stringify(this.formData));
				
				// 参数验证
				if (isEmpty(data.brand)) {
					return uni.$u.toast('请填写车辆品牌');
				}
				if (isEmpty(data.color)) {
					return uni.$u.toast('请填写车辆颜色');
				}
				if (isEmpty(data.vin)) {
					return uni.$u.toast('请填写车架号');
				}
				if (isEmpty(data.plateNumber)) {
					return uni.$u.toast('请填写车牌号');
				}
				
				data.defaultSelected = data.defaultSelected ? 1 : 0;
				const request = this.id
					? this.$http_api.editUserVehicle({ ...data, vehicleId: parseInt(this.id) })
					: this.$http_api.addUserVehicle(data);
				request.then(() => {
					uni.$u.toast(this.id ? '修改成功' : '新增成功');
					this.id = null;
					setTimeout(() => uni.navigateBack(), 1000)
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">
	.u-page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>